<template>
<div>
  <div>
    <!-- <form action="/"><van-search v-model="value" placeholder="请输入搜索关键词" class="search" show-action @search="onSearch(value)" @cancel="onCancel"/></form> -->
    <van-nav-bar title="分类" class="class-title" left-arrow @click-left="onClickLeft"/>
    <div class="class-container">
      <div class="nav">
        <ul>
          <!-- 左侧导航（锚点） -->
          <li v-for="list in classlist" :key="list.id" @click="goClass(list.id)">
            {{list.name}}
          </li>
        </ul>
      </div>
      <!-- 右侧列表展示 -->
      <div class="class-list">
        <div class="list-box">
          <div v-for="goods in classGoods" v-bind:key="goods.id" class="goods">
            <!-- 锚点位置 index goods.id -->
            <h5>{{goods.class}}</h5>
            <van-row gutter="20">
              <router-link v-for="sclass in goods.sclass" v-bind:key="sclass.id" :to="{ path: 'goods', query: { id: sclass.id, class: sclass.name, fid: goods.id }}">
              <van-col span="8">
                <img :src="sclass.imgsrc" width="90" height="90" alt="">
                <span>{{sclass.name}}</span>
              </van-col>
              </router-link>
            </van-row>
          </div>
        </div>
      </div>
    </div>
    <van-tabbar fixed:true v-model="active" style="z-index:999" >
      <van-tabbar-item icon="shop" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="bars" to="/class">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart" :info="shopCarNum" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</div>
</template>

<script>
// 引入vuex
import { mapState } from 'vuex'
// 引入jquery
var $=require('jquery')
export default {
  data () {
    return {
      value: '',
      active: 1,
      shopCarNum: '',
      searchList :[]
    }
  },
  mounted () {
    //获取当前窗口可视高度
    var sideHeight = $(window).height();
    // 获取li标签的个数
    var liNum = $('.nav ul').children('li').length;
    // 减去搜索和底部的高度，获得li固定高度
    var liHeight=(sideHeight-94)/liNum;
    // 定义li高度
    $('.nav ul').children('li').height(liHeight);
    // 定义li行高
    $('.nav ul').children('li').css('line-height',liHeight+'px');
    $('.nav ul').children('li').css('text-align','center');
    // 给点击的li添加.acitve样式
    $('.nav ul li').click(function(){
      // 当点击当前li时，移除其他兄弟li的样式
      $(this).siblings('li').removeClass('active');
      $(this).addClass("active")
    })
    // 购物车显示数
    this.shopCarNum = this.shopCar.length
  },
  methods:{
    // 获取到左侧nav的id（锚点）
    goClass (value) {
      // 获取每个.goods
      var goods = document.querySelectorAll(".goods")
      // 获取指定good到top的距离(因为是以nav id 为索引，而goods是从0开始索引，所以为了保持一致，所以当前value-1)
      var goodTop = goods[value-1].offsetTop-44
      // 滚动到指定good
      // Chrome
      document.body.scrollTop = goodTop
      // Firefox
      document.documentElement.scrollTop = goodTop
      // Safari
      window.pageYOffset = goodTop
    },
    onClickLeft () {
      window.history.go(-1)
    }
  },
  computed: {
    ...mapState(['classlist','classGoods','shopCar'])
  }
}
</script>

<style scoped>
.class-container{
  height:100%;
  padding-left:103px;
  padding-bottom:50px;
  padding-top:44px;
  overflow-y: scroll
}
.class-title{
  position: fixed;
  top: 0;
  z-index:999;
  width: 100%;
}
.nav{
  width:100px;
  position: fixed;
  left:0;
  font-size:0.8em;
  background: rgb(245, 245, 245);
  z-index: 9;
}
.nav .active{
  background:#fff;
  border-left:3px solid red;
  font-weight: bold;
}
.list-box{
  padding:0 10px;
  text-align:center
}
.list-box .goods img{
  display: block;
  width:90px;
  height:90px;
  margin-bottom:5px;
}
.list-box .goods span{
  font-size:0.5em;
}
.list-box h5{
  margin:2em 0 0 0;
}
.van-row{
  margin:0;
}
</style>
